<script setup>
import FloatingConfigurator from '@/components/FloatingConfigurator.vue';
import { ref } from 'vue';

const username = ref('');
const password = ref('');
const checked = ref(false);
</script>

<template>
    <FloatingConfigurator />
    <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
        <div class="flex flex-col items-center justify-center">
            <div style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
                <div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20" style="border-radius: 53px">
                    <div class="text-center mb-8">
                        <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" class="mb-8 w-16 shrink-0 mx-auto">
                            <rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="48" height="48" />
                            <g>
                                <path
                                    fill-rule="evenodd"
                                    clip-rule="evenodd"
                                    fill="var(--text-color)"
                                    d="M27.942,26.458c0.124-0.146,0.224-0.234,0.281-0.347
                            c0.27-0.524,0.531-1.054,0.789-1.586c0.379-0.782,0.75-1.57,1.132-2.352c0.341-0.689,0.691-1.376,1.048-2.058
                            c0.249-0.474,0.662-0.719,1.188-0.658c0.896,0.105,1.786,0.257,2.679,0.388c0.724,0.106,1.451,0.199,2.172,0.317
                            c0.415,0.068,0.839,0.13,1.229,0.272c0.607,0.22,0.765,0.807,0.935,1.35c0.155,0.504,0.271,1.023,0.402,1.536
                            c0.092,0.359,0.186,0.717,0.273,1.076c0.275,1.119,0.539,2.241,0.823,3.357c0.188,0.735,0.414,1.459,0.609,2.192
                            c0.119,0.444,0.21,0.896,0.319,1.344c0.042,0.164,0.1,0.324,0.149,0.489c0.127,0.418-0.05,0.674-0.485,0.674
                            c-0.984-0.002-1.969-0.021-2.953-0.021c-0.618,0-1.214-0.363-1.357-1.041c-0.206-0.979-0.447-1.95-0.683-2.925
                            c-0.12-0.495-0.265-0.985-0.393-1.479c-0.093-0.369-0.183-0.739-0.266-1.109c-0.193-0.871-0.376-1.742-0.569-2.611
                            c-0.06-0.265-0.133-0.527-0.217-0.782c-0.029-0.093-0.111-0.23-0.179-0.235c-0.097-0.006-0.248,0.061-0.295,0.142
                            c-0.169,0.294-0.309,0.604-0.451,0.913c-0.359,0.772-0.711,1.544-1.069,2.315c-0.29,0.627-0.586,1.251-0.879,1.874
                            c-0.577,1.232-1.13,2.476-1.737,3.691c-0.599,1.202-1.932,1.802-3.222,1.478c-0.71-0.177-1.248-0.597-1.602-1.259
                            c-0.433-0.808-0.905-1.598-1.346-2.401c-0.438-0.796-0.854-1.603-1.291-2.401c-0.358-0.656-0.737-1.302-1.097-1.959
                            c-0.137-0.25-0.26-0.512-0.365-0.777c-0.088-0.223,0.025-0.399,0.209-0.514c1.055-0.647,2.114-1.295,3.176-1.935
                            c0.301-0.183,0.564-0.054,0.742,0.313c0.46,0.943,0.928,1.877,1.389,2.819C27.331,25.16,27.619,25.778,27.942,26.458z"
                                />
                                <path
                                    fill-rule="evenodd"
                                    clip-rule="evenodd"
                                    fill="var(--primary-color)"
                                    d="M35.575,18.682c-0.523,0-1.047-0.005-1.57,0.001
                            c-1.123,0.012-2.255-0.044-3.366,0.066c-0.87,0.085-1.723,0.362-2.572,0.585c-0.607,0.159-1.219,0.326-1.792,0.573
                            c-0.876,0.38-1.726,0.824-2.577,1.26c-0.531,0.274-1.065,0.555-1.562,0.885c-0.966,0.643-1.951,1.256-2.793,2.073
                            c-0.884,0.857-1.827,1.655-2.708,2.514c-0.537,0.523-1.027,1.097-1.503,1.677c-0.749,0.911-1.483,1.837-2.191,2.783
                            c-0.313,0.417-0.576,0.886-1.057,1.121c-0.389,0.188-0.817,0.401-1.231,0.408c-1.446,0.033-2.893-0.02-4.338-0.042
                            c-0.038-0.001-0.076-0.02-0.167-0.044c0.05-0.117,0.074-0.233,0.14-0.317c0.352-0.46,0.707-0.92,1.077-1.368
                            c0.787-0.947,1.568-1.901,2.381-2.826c1.424-1.624,2.966-3.133,4.608-4.531c0.837-0.712,1.733-1.359,2.629-1.998
                            c0.601-0.429,1.238-0.81,1.879-1.175c0.691-0.393,1.39-0.779,2.116-1.101c0.845-0.372,1.716-0.695,2.591-0.992
                            c0.707-0.241,1.435-0.418,2.157-0.607c0.222-0.058,0.461-0.046,0.685-0.095c1.179-0.257,2.376-0.262,3.566-0.198
                            c0.808,0.044,1.608,0.21,2.406,0.347c0.563,0.097,1.125,0.208,1.673,0.36c0.521,0.144,1.023,0.347,1.534,0.524
                            C35.585,18.604,35.581,18.643,35.575,18.682z"
                                />
                                <path
                                    fill-rule="evenodd"
                                    clip-rule="evenodd"
                                    fill="var(--primary-color)"
                                    d="M21.509,32.831c-0.399-0.035-0.803-0.045-1.196-0.111
                            c-0.653-0.114-1.116-0.496-1.424-1.081c-0.362-0.687-0.741-1.365-1.103-2.052c-0.295-0.565-0.573-1.143-0.865-1.711
                            c-0.143-0.276-0.035-0.505,0.161-0.673c0.821-0.72,1.655-1.424,2.49-2.125c0.224-0.188,0.422-0.162,0.575,0.094
                            c0.313,0.52,0.605,1.054,0.899,1.582c0.275,0.497,0.544,1,0.818,1.496c0.362,0.653,0.734,1.305,1.094,1.961
                            c0.364,0.663,0.718,1.331,1.079,1.996c0.211,0.387,0.147,0.526-0.301,0.538c-0.741,0.02-1.483,0.006-2.225,0.006
                            C21.511,32.778,21.51,32.805,21.509,32.831z"
                                />
                                <path
                                    fill-rule="evenodd"
                                    clip-rule="evenodd"
                                    fill="var(--primary-color)"
                                    d="M12.032,14.961c0.422,0,0.847,0.032,1.265-0.009
                            c0.837-0.079,1.38,0.278,1.762,1.007c0.55,1.05,1.139,2.081,1.711,3.118c0.101,0.183,0.2,0.367,0.312,0.544
                            c0.212,0.339,0.189,0.557-0.136,0.801c-0.641,0.48-1.292,0.945-1.937,1.418c-0.145,0.106-0.291,0.212-0.432,0.325
                            c-0.459,0.372-0.672,0.32-0.95-0.203c-0.464-0.871-0.946-1.732-1.416-2.601c-0.351-0.647-0.688-1.306-1.042-1.952
                            c-0.349-0.639-0.718-1.267-1.065-1.907c-0.066-0.122-0.122-0.295-0.084-0.411c0.025-0.075,0.231-0.122,0.356-0.125
                            C10.927,14.952,11.479,14.961,12.032,14.961z"
                                />
                                <path
                                    fill-rule="evenodd"
                                    clip-rule="evenodd"
                                    fill="var(--text-color)"
                                    d="M20.639,14.805c0.959-0.007,1.6,0.529,2.116,1.264
                            c0.16,0.226,0.287,0.479,0.423,0.722c0.159,0.282,0.015,0.535-0.348,0.69c-0.9,0.382-1.792,0.785-2.691,1.17
                            c-0.294,0.125-0.595,0.235-0.901,0.332c-0.24,0.077-0.41-0.034-0.564-0.23c-0.391-0.49-0.563-1.057-0.613-1.664
                            c-0.062-0.783,0.423-1.667,1.153-1.987c0.438-0.189,0.933-0.253,1.4-0.375C20.623,14.753,20.631,14.778,20.639,14.805z"
                                />
                                <path
                                    fill-rule="evenodd"
                                    clip-rule="evenodd"
                                    fill="var(--text-color)"
                                    d="M35.528,14.795c1.071-0.076,1.723,0.475,2.218,1.331
                            c0.345,0.601,0.467,1.265,0.663,1.91c0.035,0.112-0.011,0.249-0.021,0.374c-0.121-0.017-0.248-0.017-0.364-0.053
                            c-0.867-0.279-1.735-0.56-2.6-0.849c-0.701-0.235-1.4-0.48-2.098-0.732c-0.252-0.091-0.21-0.304-0.12-0.477
                            C33.7,15.348,34.406,14.719,35.528,14.795z"
                                />
                            </g>
                        </svg>
                        <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">欢迎来到小米爱编程!</div>
                        <span class="text-muted-color font-medium">请先注册后再登录</span>
                    </div>

                    <div>
                        <label for="username" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">用户名</label>
                        <InputText id="username" type="text" placeholder="输入用户名" class="w-full md:w-[30rem] mb-8" v-model="username" />

                        <label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">密码</label>
                        <Password id="password1" v-model="password" placeholder="输入密码" :toggleMask="true" class="mb-4" fluid :feedback="false"></Password>

                        <div class="flex items-center justify-between mt-2 mb-8 gap-8">
                            <div class="flex items-center">
                                <Checkbox v-model="checked" id="rememberme1" binary class="mr-2"></Checkbox>
                                <label for="rememberme1">记住用户名密码</label>
                            </div>
                            <span class="font-medium no-underline ml-2 text-right cursor-pointer text-primary">忘记密码?</span>
                        </div>
                        <Button label="登录" class="w-full" as="router-link" to="/"></Button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.pi-eye {
    transform: scale(1.6);
    margin-right: 1rem;
}

.pi-eye-slash {
    transform: scale(1.6);
    margin-right: 1rem;
}
</style>
